<!-- 修改金额弹窗 -->
<template>
  <a-modal
    :maskClosable="false"
    title="修改订单金额"
    centered
    :width="400"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-decorator="['orderCode']" disabled />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单金额(元)">
        <a-input
          placeholder="请输入订单金额"
          v-decorator="['payMoney', { rules: [{ required: true, message: '请输入订单金额' }] }]"
        />
        <a-input v-decorator="['id']" hidden></a-input>
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button type="primary" @click="handleSubmit">确认修改</a-button>
    </template>
  </a-modal>
</template>
<script>
import { UpdatePayMoney } from '@/api/order/order'

export default {
  components: {},
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
    }
  },
  beforeCreate() {},
  created() {},
  methods: {
    show(row) {
      const { id, orderCode, payMoney } = row
      this.visible = true

      this.$nextTick(() => {
        this.form.resetFields()
        this.form.setFieldsValue({
          id,
          orderCode,
          payMoney,
        })
      })
    },
    handleCancel() {},
    // 提交数据
    handleSubmit(e) {
      this.confirmLoading = true
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          let { code, msg } = await UpdatePayMoney(values)
          this.$message[code === 0 ? 'success' : 'error'](msg)
          this.confirmLoading = false
          if (code === 0) {
            this.visible = false
            this.$emit('reload')
          }
        }
      })
    },
  },
}
</script>
<style>
</style>
<style lang="less" scoped>
.tree {
  max-height: 400px;
  overflow: auto;
}
</style>
